<template>
    <el-container style="height: 100%">
        <el-main>
            <el-image
                style="position: absolute; top: 10%; left: 20%"
                src="//cdnimg-v2.gamekee.com/wiki2.0/images/w_600/h_600/829/43637/2025/2/5/478295.png"
                fit="contain"
            />
        </el-main>
        <el-aside width="40%">
            <el-card shadow="always" style="position: absolute; top: 30%; right: 10%">
                <el-form label-position="right" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input :prefix-icon="User" v-model="username" clearable />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input :prefix-icon="Key" v-model="password" type="password" clearable />
                    </el-form-item>
                    <div style="position: absolute; right: 10%">
                        <el-button>
                            <router-link to="/register">注册</router-link>
                        </el-button>
                        <el-button type="primary" @click="handleLogin" v-loading="loginLoading">
                            登录
                        </el-button>
                    </div>
                </el-form>
                <template #footer>
                    <p>好好学习</p>
                </template>
            </el-card>
        </el-aside>
    </el-container>
</template>

<script setup>
import { User, Key } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { postLogin } from '@/utils/api'
import { ElMessage } from 'element-plus'
import { useCountStore } from '@/store/counterStore'
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/store/tokenStore'

const store = useCountStore()
const tokenStore = useTokenStore()
const router = useRouter()

console.log(store.count)
console.log(store.doubleCount)
store.increment()
store.increment()
store.increment()

const username = ref('')
const password = ref('')
const loginLoading = ref(false)
const emit = defineEmits(['loginout'])

function handleLogin() {
    loginLoading.value = true
    postLogin({
        username: username.value,
        password: password.value
    })
        .then((response) => {
            loginLoading.value = false
            tokenStore.token = response.token
            router.push('/student-infos')
            emit('loginout', true)
        })
        .catch((error) => {
            loginLoading.value = false
            ElMessage('Login Failed...')
        })
}
</script>

<style>
.common-layout {
    background-image: url();
}

.el-card__footer {
    border-top: 0;
}
</style>
